#SVG source

[gagande]

Purecode reviews | The clip-path property in CSS

The clip-path property in CSS is a crucial tool for creating complex shapes. By clipping an element to a basic shape or an SVG source, you can craft aesthetic designs that are unique to your brand. 

[daily-public-domain]

Day 392: Butterfly made of butterflies

link

–This image is part of the public domain, meaning you can do anything you want with it! (you could even sell it as a shirt, poster or whatever, no need to credit it!)–

[charlignon]

Petition to make this the next Tumblr app icon

[iconbuddy]

200k+ Open Source SVG Icons

Everyone loves Icons. So, I curated more than 200,000 open source svg icons and build a side project. → http://iconbuddy.com

[obscurlett]

I love gushing bout my ocs like this instead of coherent text posts.

you guys I love Seiren. she's king shit to me. she's calm and collected, arrogant, "business or pleasure" to which she'd reply "combat". she's a sword fighter, she's a fireball caster, she's the thin line between genius and stupid, she smells like the gym, she dresses elegant, and of course common remi oc facts- on the spectrum and aroace and transes her gender (nonbinary). might be one of my best ocs yet

SPINNING HER IN MY MIND

[lifehacksthatwork]

Used some of these again today and it reminded me

Free illustrations/icons for websites etc

I've talked before about places like pixabay etc for free picture resources but today I have a bunch of websites where you can grab open source illustrations and svg images. Great for budding web designers or hobbyists on a budget.

Undraw - completely free open source high quality illustrations for you to use.

Atlas Icons - Open source library of free icons.

SVG Repo - Half a million open license SVG vector and icons.

Storyset - Free illustrations related to business / corporate environs

Humaaans - Mix and match illustrations of people

DrawKit - Free illustrations and icons.

LottieFiles - Lightweight animations for websites and social media.

illustrations - Open source illustration kit.

Free svg illustrations - take a guess lol

UXcelona - Free SVG illustrations.

Open Doodles - Open source collections of free illustrations.

If you'd like more free useful resources, check out this list.

[michaelnordeman]

You may have noticed I always include a place—like “Värmland”—with my pictures. Sometimes it’s the name of a nature reserve or a specific area, but I always try to include the landskap as well.

These landskap (literally “landscapes”) are Sweden’s old historical provinces. They no longer have any administrative role, but they’re still very much alive in our cultural and geographical identity. We use them to describe places, nature, and even dialects.

Värmland, for example, is both the name of a landskap and a modern administrative region (län), with almost—but not quite—the same borders. The län are made up of municipalities (kommuner), and they don’t always follow the old provincial lines. Some regions combine several landskap, others split them—it's a bit messy.

Most of my photos are from Värmland, where I live, but I regularly visit nature reserves all over Sweden. To give you a better sense of where the pictures are taken, I’ve added a map showing all the Swedish landskap. Even a rough idea of the geography can make the images feel more rooted in place.

Both maps are from Wikimedia and are used under the Creative Commons Attribution-ShareAlike 3.0 Unported licence. Sources: https://commons.wikimedia.org/wiki/File:Sverigekarta-Landskap_Text.svg https://en.m.wikipedia.org/wiki/File:Sweden_in_Europe_%28-rivers_-mini_map%29.svg#filelinks

[mostlysignssomeportents]

AI ethics vs AI "safety"

They are hemorrhaging a river of cash, but that river’s source is an ocean-sized reservoir of even more cash.

To keep that reservoir full, the AI industry needs to convince fresh rounds of “investors” to give them hundreds of billions of dollars on the promise of a multi-trillion-dollar payoff.

That’s where the “AI Safety” story comes in. You know, the tech bros who run around with flashlights under their chins, intoning “ayyyyyy eyeeeee,” and warning us that their plausible sentence generators are only days away from becoming conscious and converting us all into paperclips.

It’s pure criti-hype: “Our technology is so powerful that it endangers the human race, which is why you should both invest in it and use it to replace all of your workers.”

This form of criticism is entirely distinct from the legitimate realm of “AI ethics,” whose emphasis is on how bad AI is at the things that will supposedly generate those promised trillions. Things like bias, low-quality training data, training data attacks, data ordering attacks, adversarial examples, the endless stream of confident lies, and the high degree of supervision they necessitate.

Add to that the exploitative labor pipeline, the environmental damage, and the public safety risks and a very different critique emerges —one that’s grounded in AI’s shortcomings, not the supposed risks arising from its incredible power.

-How the Writers Guild sunk AI's ship: No one's gonna buy enterprise AI licenses if they can't fire their workers

Image: Cryteria (modified) https://commons.wikimedia.org/wiki/File:HAL9000.svg

CC BY 3.0 https://creativecommons.org/licenses/by/3.0/deed.en

[shehimin]

Edgaring time!

Tutorial on how to make your own responsive Edgar :D I will try to explain it in really basic terms, like you’ve never touched a puter (which if you’re making this… I’m sure you’ve touched plenty of computers amirite??? EL APLAUSO SEÑOOOREEES).

If you have some experience I tried to highlight the most important things so you won’t have to read everything, this is literally building a website but easier.

I will only show how to make him move like this:

Disclaimer: I’m a yapper.

Choosing an engine First of all you’ll need something that will allow you to display a responsive background, I used LivelyWallpaper since it’s free and open-source (we love open-source).

Choosing an IDE Next is having any IDE to make some silly code! (Unless you can rawdog code… Which would be honestly impressive and you need to slide in my DMs and we will make out) I use Visual Studio!!!

So now that we have those two things we just need to set up the structure we will use.

Project structure

We will now create our project, which I will call “Edgar”, we will include some things inside as follows:

Edgar

img (folder that will contain images) - thumbnail.png (I literally just have a png of his face :]) - [some svgs…]

face.js (script that will make him interactive)

index.html (script that structures his face!)

LivelyInfo,json (script that LivelyWallpaper uses to display your new wallpaper)

style.css (script we will use to paint him!)

All of those scripts are just literally like a “.txt” file but instead of “.txt” we use “.js”, “.html”, etc… You know? We just write stuff and tell the puter it’s in “.{language}”, nothing fancy.

index.html

Basically the way you build his silly little face! Here’s the code:

<!doctype html> <html>     <head>         <meta charset="utf-8">         <title>Face!</title>         <link rel = "stylesheet" type = "text/css" href = "style.css">     </head>     <body>         <div class="area">             <div class="face">                 <div class="eyes">                     <div class="eyeR"></div>                     <div class="eyeL"></div>                 </div>                 <div class="mouth"></div>             </div>         </div>         <script src="face.js"></script>     </body> </html>

Ok so now some of you will be thinking “Why would you use eyeR and eyeL? Just use eye!“ and you’d be right but I’m a dummy who couldn’t handle making two different instances of the same object and altering it… It’s scary but if you can do it, please please please teach me ;0;!!!

Area comes in handy to the caress function we will implement in the next module (script)! It encapsulates face.

Face just contains the elements inside, trust me it made sense but i can’t remember why…

Eyes contains each different eye, probably here because I wanted to reuse code and it did not work out and when I kept going I was too scared to restructure it.

EyeR/EyeL are the eyes! We will paint them in the “.css”.

Mouth, like the eyeR/eyeL, will be used in the “.css”.

face.js

Here I will only show how to make it so he feels you mouse on top of him! Too ashamed of how I coded the kisses… Believe me, it’s not pretty at all and so sooo repetitive…

// ######################### // ##      CONSTANTS      ## // ######################### const area = document.querySelector('.area'); const face = document.querySelector('.face'); const mouth = document.querySelector('.mouth'); const eyeL = document.querySelector('.eyeL'); const eyeR = document.querySelector('.eyeR'); // ######################### // ##     CARESS HIM      ## // ######################### // When the mouse enters the area the face will follow the mouse area.addEventListener('mousemove', (event) => {     const rect = area.getBoundingClientRect();     const x = event.clientX - rect.left;     const y = event.clientY - rect.top;     face.style.left = `${x}px`;     face.style.top = `${y}px`; }); // When the mouse leaves the area the face will return to the original position area.addEventListener('mouseout', () => {     face.style.left = '50%';     face.style.top = '50%'; });

God bless my past self for explaining it so well, but tbf it’s really simple,,

style.css

body {     padding: 0;     margin: 0;     background: #c9c368;     overflow: hidden; } .area {     width: 55vh;     height: 55vh;     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%);     background: transparent;     display: flex; } .face {     width: 55vh;     height: 55vh;     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%);     background: transparent;     display: flex;     justify-content: center;     align-items: center;     transition: 0.5s ease-out; } .mouth {     width: 75vh;     height: 70vh;     position: absolute;     bottom: 5vh;     background: transparent;     border-radius: 100%;     border: 1vh solid #000;     border-color: transparent transparent black transparent;     pointer-events: none;     animation: mouth-sad 3s 420s  forwards step-end; } .face:hover .mouth {     animation: mouth-happy 0.5s forwards; } .eyes {     position: relative;     bottom: 27%;     display: flex;   } .eyes .eyeR {     position: relative;     width: 13vh;     height: 13vh;     display: block;     background: black;     margin-right: 11vh;     border-radius: 50%;     transition: 1s ease } .face:hover .eyeR {     transform: translateY(10vh);      border-radius: 20px 100% 20px 100%; } .eyes .eyeL {     position: relative;     width: 13vh;     height: 13vh;     display: block;     background: black;     margin-left: 11vh;     border-radius: 50%;     transition: 1s ease; } .face:hover .eyeL {     transform: translateY(10vh);     border-radius: 100% 20px 100% 20px; } @keyframes mouth-happy {     0% {         background-color: transparent;         height: 70vh;         width: 75vh;     }     100% {         border-radius: 0 0 25% 25%;         transform: translateY(-10vh);     } } @keyframes mouth-sad {     12.5%{         height: 35vh;         width: 67vh;     }     25% {         height: 10vh;         width: 60vh;     }     37.5% {         width: 53vh;         border-radius: 0%;         border-bottom-color: black;     }     50% {         width: 60vh;         height: 10vh;         transform: translateY(11vh);         border-radius: 100%;         border-color: black transparent transparent transparent;     }     62.5% {         width: 64vh;         height: 20vh;         transform: translateY(21vh);     }     75% {         width: 69vh;         height: 40vh;         transform: translateY(41vh);     }     87.5% {         width: 75vh;         height: 70vh;         transform: translateY(71vh);     }     100% {         width: 77vh;         height: 90vh;         border-color: black transparent transparent transparent;         transform: translateY(91vh);     } }

I didn’t show it but this also makes it so if you don’t pay attention to him he will get sad (mouth-sad, tried to make it as accurate to the movie as possible, that’s why it’s choppy!)

The .hover is what makes him go like a creature when you hover over him, if you want to change it just… Change it! If you’d rather him always have the same expression, delete it!

Anyway, lots of easy stuff, lots of code that I didn’t reuse and I probably should’ve (the eyes!!! Can someone please tell me a way I can just… Mirror the other or something…? There must be a way!!!) So now this is when we do a thinking exercise in which you think about me as like someone who is kind of dumb and take some pity on me.

LivelyInfo.json

{   "AppVersion": "1.0.0.0",   "Title": "Edgar",   "Thumbnail": "img/thumbnail.png",   "Preview": "thumbnail.png",   "Desc": "It's me!.",   "Author": "Champagne?",   "License": "",   "Type": 1,   "FileName": "index.html" }

Easy stuff!!! 

Conclusion

This could've been a project on git but i'm not ready and we're already finished. I'm curious about how this will be seen on mobile and PC,,, i'm not one to post here.

Sorry if I rambled too much or if i didn't explain something good enough! If you have any doubts please don't hesitate to ask.

And if you add any functionality to my code or see improvements please please please tell me, or make your own post!

[gordonramsei]

･:*:｡☃︎ FANTASY .

long time no see ! these past few months have been stressful for me so i wanted to extend my most sincere gratitude for each and every one of u and all of ur patience ! it is truly appreciated more than u know ! fantasy is a multi - purpose tumblr theme that's compact , customizable , and cute as heck . with plenty of styling options , u can make this code ur own and show off ur own personal vibe . i'm endlessly excited to see what all of ur lovely brains come up with ! as usual , pls let me know if u encounter any errors or bugs and i will do my best to troubleshoot asap !

pretty please give this   post a like or  reblog  if u intend on using this code or if u just want to be a supportive hottie  ! love u all bigly ; be sure to pet a cute animal today  ! mwuah !

･:*:｡☃︎ THEME FEATURES : 

optional stars and blob svgs for both sidebar and nav

optional grayscale img toggle

accessible font sizing toggle

1 free link to use however u please

navigation tab w/ 6 free links

full list of credits , inspo , image sizes , and fonts are listed within the google doc containing the code

this theme is a patreon exclusive . interested ? click here to consider becoming a part of the hottie crew ! we'd love to have u !

･:*:｡☃︎ click the source link to view a live preview !

[daily-public-domain]

Day 404: Error 404 not found Unicorn

link

–This image is part of the public domain, meaning you can do anything you want with it! (you could even sell it as a shirt, poster or whatever, no need to credit it!)–

[intervex]

Some specific intergender flags

I made these all in late June 2024 as part of my review of intersex flag mashup techniques, and only now realized I never posted these specifically to Tumblr (Whoops! 😅)

These are all flags for specific intergenders (genders that are influenced/connected to being intersex). They all take the most common flag for the combining gender and add intersex yellow stripes to the top and bottom. 💛

Inter-xenogender................ inter-agender................... inter-bigender

inter-genderqueer................. inter-neutrois.......... inter-trigender

inter-neutralgender..... inter-genderapathetic........ inter-maverique

Inter-maverique is maverique in a specifically intersex way, inter-genderapathetic is gender apathy that is specifically connected to being intersex, and so on. 💜

I am under the impression that all the source flags used here for intergender mashups are public domain on the basis of Threshold of Originality. My mashups are all public domain as a result. 💛

I posted SVGs to Wikimedia Commons back in June 2024.

Tagging for archival: @intersexflags @varsex-pride @radiomogai @liom-archive

[leathemage]

the zelda timeline

image source:

[isobug]

Desirdae Symbol ( PSD template + SVG file )

Made for part of my Desirdae flag PSD template, the Desirdae symbol made into a PSD template of it's own + a SVG file so it can be exported at any size without loss of image quality! You can download both from the link in the post source ( down at the very bottom of the post. )

I do NOT recommend using the preview image above for editing, it's been compressed !!

The .PSD template has each outline and color on it's own layer for ease of editing + coloring + layer effect application. ( I would recommend downloading and editing that instead of the preview image here. )

The .SVG is the plain black symbol. The universe symbol in the middle was made by jojooid on Flaticon, the attribution link can be also be found at the post source since tumblr doesn't like SVGur external links...

( Like the term itself and my direct interaction criteria, I do not support / am against RQs + harmful transition and will block any direct interactions with my account related to either. I will not argue about this with you. )

Taglist - @radiomogai, @daybreakthing, @desirdae-archive

[newcodesociety]

"Ready to use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open source, MIT licensed, and built with ♥️ by the team at LifeOmic." Site description by the website